<template>
	

	<div class="home-wrap">
		<div class="header">
			<div class="left">
				江西省水利科学院·江西省水利学会数字化办公平台1.0
			</div>
			<div class="right">
				<!-- <div class="weather">
					<iframe style="width:100%;height:100%" src="http://tianqi.2345.com/plugin/widget/index.htm?s=3&z=2&t=0&v=0&d=2&bd=0&k=&f=&ltf=009944&htf=cc0000&q=1&e=1&a=1&c=54511&w=180&h=36&align=left" frameborder="0"></iframe>
				</div> -->
				<div class="name">
					{{user?user.userName:''}}
				</div>
				<div class="line">
					
				</div>
				<div class="logout" @click="logout">
					退出
				</div>
			</div>
			
		</div>
		
		
		<div class="page-main">
			<div class="main-divide">
				<div class="p-wrap">
					<img src="../../assets/icon_User.png" alt="" />
				</div>
				<div class="user-name">
					{{user?user.userName:''}}
				</div>
				<div class="zhiwei">
					{{user?user.skyDeptName:''}}
					
				</div>
				
				<div class="pingtai-desc">
					数字化办公
				</div>
				
				<div class="tree-wrap">
					<div class="item-wrap" @click="changepage('')">
						<img src="../../assets/icon_Home.png" alt="" />
						<div class="menu-item">门户首页</div>
					</div>
					<div class="item-wrap" @click="changepage('/home')">
						<img src="../../assets/icon_Backend.png" alt="" />
						<div class="menu-item">官网后台</div>
					</div>
					<div class="item-wrap">
						<img src="../../assets/icon_Finance.png" alt="" />
						<div class="menu-item">财务报账</div>
					</div>
				</div>
				
				
				<div class="pingtai-desc">
					智慧水科院
				</div>
				<div class="four-wrap">
					<div class="item-wrap" @click="enterpage(1)">
						<img src="../../assets/icon_办公.png" alt="" />
						<div class="menu-item">行政办公</div>
					</div>
					<div class="item-wrap" @click="enterpage(2)">
						<img src="../../assets/icon_财务.png" alt="" />
						<div class="menu-item">财务报账</div>
					</div>
					<div class="item-wrap" @click="enterpage(3)">
						<img src="../../assets/icon_出差.png" alt="" />
						<div class="menu-item">出差调度</div>
					</div>
					<div class="item-wrap" @click="enterpage(4)">
						<img src="../../assets/icon_食堂.png" alt="" />
						<div class="menu-item">智慧食堂</div>
					</div>
					<div class="item-wrap" @click="enterpage(5)">
						<img src="../../assets/icon_文保.png" alt="" />
						<div class="menu-item">文件保护</div>
					</div>
					<div class="item-wrap" @click="enterpage(6)">
						<img src="../../assets/icon_人资.png" alt="" />
						<div class="menu-item">人资协同</div>
					</div>
					<div class="item-wrap" @click="enterpage(7)">
						<img src="../../assets/icon_科技.png" alt="" />
						<div class="menu-item">科技服务</div>
					</div>
					<div class="item-wrap" @click="enterpage(8)">
						<img src="../../assets/icon_科研.png" alt="" />
						<div class="menu-item">科研管理</div>
					</div>
					<div class="item-wrap" @click="enterpage(9)">
						<img src="../../assets/icon_Home.png" alt="" />
						<div class="menu-item">固定资产</div>
					</div>
					<div class="item-wrap" @click="enterpage(10)">
						<img src="../../assets/icon_资产.png" alt="" />
						<div class="menu-item">后勤保障</div>
					</div>
					<div class="item-wrap" @click="enterpage(11)">
						<img src="../../assets/icon_Finance.png" alt="" />
						<div class="menu-item">用户中心</div>
					</div>
					<div class="item-wrap">
						
					</div>
				</div>	
			</div>
			<div class="main-card" v-show="showType==1">
				<Calendar
				  :lunar="lunar"
				  selectMode="multiRange"
				  class-name="mpCalendar"
				  style="width: 100%;height:500px;margin:0 auto"
				  monFirst
				  completion
				  backgroundText
				  :format="formatOfRangeMode"
				  :select-date="multiRangeModeDate"
				  :tile-content="multiTileContent"
				  :weeks="['一','二','三','四','五','六','日',]"
				  @onMonthChange="getHoliday"
				/>
				 
				<div class="canlender-line"></div>
				
				<div class="waite-do">
					<div class="waite-title">
						<div class="left-t">
							事项办理
						</div>
						<div class="right-t">
							
						</div>
					</div>
					<div class="line-wrap">
						<div class="line-blue"></div>
						<div class="line-black"></div>
					</div>
					<div style="padding-top:10px">
						<img style="margin:0 auto;display:block" src="../../assets/metadata.png" alt="">
						<div style="text-align: center;">暂无数据</div>
					</div>
					
					<!-- <div class="do-item-wrap">
						<div class="left-desc">
							<div class="title">这里是待办事项类型或名称信息</div>
							<div class="other-desc">
								李某某｜2023/12/18  14:30:25
							</div>
						</div>
						<div class="next-click">
							<right-outlined :style="{'font-size':'25px',color:'#5190F5',cursor:'pointer'}" />
						</div>
					</div>
				 -->
					
					
				</div>
				
			</div>
			
			<div class="main-person" v-show="showType==1">
				<div class="top-part">
					<div class="part-common" style="margin-right:20px;margin-bottom:20px">
						<div class="part-common-title">
							<div>
								学会新闻
							</div>
							<div class="more-link" @click="listmore(1)">查看全部</div>
						</div>
						<div class="line-wrap">
							<div class="line-blue"></div>
							<div class="line-black"></div>
						</div>
						<div class="part-main">
							<div @click="viewdetail(item)"  class="part-item" v-for="item in xuehuixinwenList">
								<div class="left-desc">{{item.articleTitle}}</div>
								<div class="right-time">{{item.articleTime}}</div>
							</div>
						</div>
					</div>
					<div class="part-common">
						<div class="part-common-title">
							
							<div>
								学会党建
							</div>
							<div class="more-link" @click="listmore(2)">查看全部</div>
						</div>
						<div class="line-wrap">
							<div class="line-blue"></div>
							<div class="line-black"></div>
						</div>
						<div class="part-main">
							<div @click="viewdetail(item)" class="part-item" v-for="item in xuehuidangjianList">
								<div class="left-desc">{{item.articleTitle}}</div>
								<div class="right-time">{{item.articleTime}}</div>
							</div>
						</div>
					</div>
					
				</div>
				<div class="bottom-part">
					<div class="part-common-title">
						
						<div>
							年文章发布数量统计
						</div>
						<div>
							<a-date-picker @change="yearChang" v-model:value="currentDate" picker="year" />
						</div>
					</div>
					<div id="tongji"></div>
				</div>
			</div>
			
			<div class="detail-wrap" v-show="showType==2">
				<div class="back-to">
								 <a-button type="primary" style="margin-right:10px" class="add-right" @click="backto(true)" >返回</a-button>
				</div>
				<div class="main-details-title">
					{{pagearticl.articleTitle}}
				</div>
				
				<div class="main-details-subtitle">
					<div class="main-details-subtitle-txt">阅读量：{{pagearticl.readNum}}</div>
					<div class="main-details-subtitle-txt">
					来源：{{pagearticl.articleSource}}
					</div>
					<div class="main-details-subtitle-txt">
					时间：{{pagearticl.articleTime}}</div>
				</div>
				<div v-html="pagearticl.articleContent"></div>
			</div>
			
			<div class="articl-list" v-if="showType==3">
				<div class="back-to" style="justify-content: space-between;">
					<div style="font-size:28px">
						{{nowdata.categoryName}}
					</div>
								 <a-button type="primary" style="margin-right:10px" class="add-right" @click="backto(true)" >返回</a-button>
				</div>
				<articllist :nowdata="nowdata"></articllist>
			</div>
			
		</div>
	</div>

	
	
	
</template>
<script>
       let option={
            grid: {
                left: '5%',
                right: '5%',
                top: '8%',
                bottom: '5%',
                containLabel: true
            },
            tooltip: {
                trigger: 'item',
                formatter: function (parms) {
                    return parms.marker + " " + parms.name + "：" + parms.value + "篇";
                }
            },
            xAxis: {
                type: 'category', // category(坐标轴类型)
                data: ['1月', '2月', '3月', '4月', '5月', '6月','7月', '8月', '9月', '10月', '11月', '12月'],
                axisTick: { // 坐标轴刻度相关配置
                    show: false // 是否显示坐标轴刻度
                },
               
                axisLabel: { // 坐标轴刻度标签相关配置
                    color: '#333',
                    fontSize: 14,
                    margin: 20
                }
            },
            yAxis: {
                type: 'value', // value(数值轴,适用于连续数据)
                axisTick: { // 坐标轴刻度相关配置
                    show: false  // 是否显示坐标轴刻度
                },
                axisLine: { // 坐标轴轴线相关配置
                    show: false // 是否显示坐标轴轴线
                },
                axisLabel: { // 坐标轴刻度标签相关配置
                    color: '#333',
                    fontSize: 14
                },
                splitLine: { // 坐标轴在 grid 区域中的分隔线
                    lineStyle: { // 分割线配置
                        color: 'rgba(0,0,0,0.15)' // 分割线颜色
                    }
                }
            },
            series: [
              
                {
                    type: 'line', // 柱状图
                   smooth: true,   // 设置折线图平滑
                       lineStyle: {
                         smooth: true   // 设置平滑曲线
                       },
                    itemStyle: { // 图形样式
                        // color支持(rgb(255,255,255)、rgba(255,255,255,1)、#fff,也支持渐变色和纹理填充)
                        // 下面就是使用线性渐变
                        color: {
                            "x": 0,
                            "y": 0,
                            "x2": 0,
                            "y2": 1,
                            "type": "linear",
                            "global": false,
                            "colorStops": [{
                                "offset": 0, // 0%处的颜色
                                "color": "rgba(0,229,255,0.5)"
                            }, {
                                "offset": 1, // 100%处的颜色
                                "color": "#1F9BFF"
                            }]
                        }
                    },
                    data: []
                }
            ]
        }
import * as echarts from 'echarts'
import articllist from './articllist.vue'
import axios from 'axios';
import { RightOutlined,LeftOutlined } from '@ant-design/icons-vue';
import {
	slxhapisystemarticleinforeadArticleDetail,
slxhapisystemarticleinfogetArticleList,slxhapisystemarticleinfostatisticsYearInfo,slxhapisystemarticleinfogetYearHolidayInfo } from '../../../api/manpart.js'
import { computed,ref,watch, defineComponent,reactive,onMounted } from 'vue';
import {useRouter} from 'vue-router'
import {useStore} from 'vuex'
import dayjs from 'dayjs'
let user=JSON.parse(localStorage.getItem('shuilixiehui-user'))
import Calendar from 'mpvue-calendar'//mpvue-calendar日历插件
import lunar from 'mpvue-calendar/dist/lunar'//引入mpvue-calendar农历
const formatOfRangeMode = (year, month) => {
  const transform = {
  1: '一',
  2: '二',
  3: '三',
  4: '四',
  5: '五',
  6: '六',
  7: '七',
  8: '八',
  9: '九',
  10: '十',
  11: '十一',
  12: '十二',
  }

  return [`${year}年`, `${month}月`];
 
}
export default defineComponent({
	 components: {
		 articllist,
		 Calendar,
	      RightOutlined,
		  LeftOutlined
	    },
  setup() {
	  let nowdata=ref({})
	  //1显示模块2显示文章详情3显示文章列表
	  let showType=ref(1)
	  const backto=()=>{
		  showType.value=1
	  }
	  let detailarticl=ref('')
	  let pagearticl=ref('')
	  let currentDate = ref()
	  currentDate.value=dayjs();
	
	  const currentYear = currentDate.value.format('YYYY');
	  const currentMonth = currentDate.value.format('MM');
	  const currentDay = currentDate.value.format('DD');
	  const multiTileContent = ref({
	    [`${currentYear}-${currentMonth}-${currentDay}`]: {
	      className: 'atToday',
	      content: '今'
	    },
	    }
	  )
	  let tongjichart = null
	  let onShow=ref(false)
	  const $route=useRouter()
	  let applyTimeRange=ref([])
	  let headers={
		 Authorization:localStorage.getItem('ht-new-fixed-token') 
	  }
	 
	    let timesel = ref();
	    timesel.value=dayjs()
	    const onchange = (value, mode) => {
			onShow.value=true
	        console.log(value, mode);
	    };
	    
		const getplatform=()=>{
			// 发起一个post请求
			axios({
			  method: 'post',
			  url: 'http://10.36.15.100:8989/user-center/sky/oauth2/api/v1/platform/view/pagePlatform',
			  data: {
				currentPage:1,
				pageSize:100
			  }
			}).then(function (resp) {
				let res=resp.data
				
				console.log(res)
			
		
			
		})
	     
	  
	}
	
	const monthChange=(num)=>{
		timesel.value=timesel.value.add(num, 'month')
	}
	
	
	
	onMounted(()=>{
		getjiejiari(currentYear)
		tongjichart = echarts.init(document.getElementById('tongji'));
		gettongji()
		getList('cate-1711593283668',xuehuixinwenList)
		getList("cate-1711588826168",xuehuidangjianList)
		getplatform()
		//store.commit('yanshoucaigouhomeChange',[])
		
	})
	

	const getjiejiari=(year)=>{
		
		slxhapisystemarticleinfogetYearHolidayInfo({year}).then(e=>{
			const data = e.object
			    let obj = {}
			    data.map(elem => {
			      let parts = elem.date.split('-')
			      let month = parts[0].replace(/^0+/, ''); // 去掉月份前的0
			      let day = parts[1].replace(/^0+/, ''); // 去掉日期前的0
			      // 重新拼接日期字符串
			      let newDateStr = `${year}-${month}-${day}`;
			      Object.assign(obj, { 
			        [newDateStr] : {
			          className: elem.isHoliday ? 'atRelax' : 'working',
			          content: elem.isHoliday ? '休' :'班'
			        }
			      })
			    })
			    multiTileContent.value = {...multiTileContent.value,...obj}
		}).catch(err=>{
			console.log(err)
		})
	}
	const drawchart=()=>{
		
	}
	
	const yearChang=()=>{
		gettongji()
	}
	
	const gettongji=()=>{
		slxhapisystemarticleinfostatisticsYearInfo({year:currentDate.value.format('YYYY')}).then(e=>{
			option.series[0].data=e.object.map(item=>{
				return item.articleNum
			})
			
			tongjichart.setOption(option)
		}).catch(err=>{
			console.log(err)
		})
	}
	const enterpage=type=>{
		let token=localStorage.getItem('shuilixiehui-token')
		switch(type){
			
			case 1:
				// 打开一个新窗口，显示指定的URL
				window.open('http://10.36.15.103:81/OASystem/#/loadingPage?token='+token, '_blank');
				 
				
			break;
			case 2:
				// 打开一个新窗口，显示指定的URL
				window.open('http://10.36.15.104:81/financialWeb/#/loadingPage?token='+token, '_blank');
			break;
			case 3:
				// 打开一个新窗口，显示指定的URL
				window.open('http://10.36.15.105:81/carcc/web/#/loadingPage?token='+token, '_blank');
			break;
			case 4:
				// 打开一个新窗口，显示指定的URL
				window.open('http://10.36.15.23:8686/canteen/web/#/loadingPage?token='+token,'_blank');
			break;
			case 5:
				// 打开一个新窗口，显示指定的URL
				window.open('http://10.36.15.113:8123/zhgl/fileEncryptWeb/#/loadingpage?token='+token, '_blank');
			break;
			case 6:
				// 打开一个新窗口，显示指定的URL
				window.open('http://10.36.15.112:9090/zhgl/hrWeb/#/loadingpage?token='+token, '_blank');
			break;
			case 7:
				// 打开一个新窗口，显示指定的URL
				window.open('http://10.36.15.110:9090/kjfwSystem/#/loadingPage?token='+token, '_blank');
			break;
			case 8:
				// 打开一个新窗口，显示指定的URL
				window.open('http://10.36.15.111:9090/zhgl/yky_web/#/loadingPage?token='+token, '_blank');
			break;
			case 9:
				// 打开一个新窗口，显示指定的URL
				window.open('http://10.36.15.107:81/assetSystem/#/loadingpage?token='+token, '_blank');
			break;
			case 10:
				// 打开一个新窗口，显示指定的URL
				window.open('http://10.36.15.108:81/logisticsWeb/#/loadingPage?token='+token, '_blank');
			break;
			case 11:
				// 打开一个新窗口，显示指定的URL
				window.open('http://10.36.15.100:8989/zhgl/yhzx/#/loadingPage', '_blank');
			break;
			
		}
	}
	const changepage=path=>{
		$route.push({
			path
		})
	}
	
	
		
		
		
		
		
		
	const logout=()=>{
		window.location.href=globalVar.tiaozhuanUrl
	}	
	let xuehuixinwenList=ref([])
	let xuehuidangjianList=ref([])
	const getList=(categoryCode,data)=>{
			  
			   slxhapisystemarticleinfogetArticleList({categoryCode,pageSize:10,currentPage:1}).then(e=>{
				    data.value=e.object.dataList.map(item=>{
						item.articleTime=dayjs(new Date(item.articleTime)).format('MM-DD')
						return item
					})		   
				   
			   }).catch(err=>{
				   console.log(err)
			   })
			   
	}	
		
	const listmore=(type)=>{
		let record={}
		switch(Number(type)){
			case 1:
				record={
					categoryCode: "cate-1711593283668",
					categoryName: "学会新闻",
					type: "1",
				}
				
			break;
			
			case 2:
				record={
					categoryCode: "cate-1711588826168",
					categoryName: "学会党建",
					type: "1",
				}
			break;
		}
		nowdata.value=record
		showType.value=3
		// $route.push({
		// 				query:record,
		// 	path:'/articlelist'
		// })
	}
	
	
		
	const viewdetail=record=>{

		let articleCode=record.articleCode
		slxhapisystemarticleinforeadArticleDetail({articleCode}).then(e=>{
			showType.value=2
			pagearticl.value=e.object
			pagearticl.value.articleTime=dayjs(new Date(pagearticl.value.articleTime)).format('YYYY-MM-DD')
						
		}).catch(err=>{
			console.log(err)
		})
		// $route.push({
		// 	query:{
		// 		articleCode:record.articleCode
		// 	},
		// 	path:'/articledetail'
		// })
	}
	
	const getHoliday=(y,m)=>{
		getjiejiari(y)
	}
		
    return {
		nowdata,
		backto,
		pagearticl,
		detailarticl,
		showType,
		getHoliday,
		yearChang,
		currentDate,
		multiTileContent,
		formatOfRangeMode,
		lunar,
		viewdetail,
		listmore,
		xuehuixinwenList,
		xuehuidangjianList,
		logout,
		user,
		enterpage,
		changepage,
		onShow,
		monthChange,
		timesel,
		onchange,
		    
    };
  }
});
</script>
<style>
	.mpCalendar .vc-calendar-date, .mpCalendar .vc-calendar-year, .mpCalendar .vc-calendar-month{
		color:#00041A!important;
		font-size:16px;
	}
	.mpCalendar .working {
	    text-align: center;
	    font-size: 20px;
	    background-color: #4e5877;
	    color: #FFFFFF;
	    width: 20px;
	    height: 20px;
	    line-height: 20px;
	    border-radius: 5px;
	    right: 9px;
	    top: 10px;
	}
	.mpCalendar .atRelax {
	    text-align: center;
	    font-size: 20px;
	    background-color: #eb3333;
	    color: #FFFFFF;
	    width: 20px;
	    height: 20px;
	    line-height: 20px;
	    border-radius: 5px;
	    right: 9px;
	    top: 10px;
	}
	.vc-calendar-tools .vc-calendar-week-head .vc-calendar-week-head-container .vc-calendar-week-item{
		color:red;
		font-weight:bold;
	}
	.vc-calendar-timetable .vc-calendar-timetable-wrap .vc-calendar-body .vc-calendar-row .vc-calendar-day.vc-calendar-dayoff .vc-calendar-date{
		color:#fff;
	}
</style>
<style scoped>
	.back-to{
		padding:5px 10px 6px 30px;
		align-items: center;
		display:flex;
		justify-content: flex-end;
	}
	.main-details-subtitle-txt {
	    padding: 0 15px;
	}
	.main-details {
	    padding: 0 50px 25px 50px;
	}
	.main-details-title {
	    font-size: 26px;
	    text-align: center;
	    color: #A3161C;
	    padding: 0 0 10px 0;
	}
	.main-details-subtitle {
	    padding: 10px 0 20px 0;
	    display: flex;
	    justify-content: center;
	    font-size: 14px;
	}
	.main-details-subtitle > span {
	    padding: 0 15px;
	}
	.detail-wrap{
		background:#fff;
		height:100%;
		overflow: auto;
		flex:1;
		margin-left:30px;
		margin-right:30px;
		background:#fff;
		box-shadow: 0px 5px 10px 0px rgba(146,193,255,0.5);
		border-radius: 12px;
		padding: 0 30px;
	}
	.articl-list{
		height:100%;
		overflow: auto;
		flex:1;
		margin-left:30px;
		margin-right:30px;
		background:#fff;
		box-shadow: 0px 5px 10px 0px rgba(146,193,255,0.5);
		border-radius: 12px;
		
	}
	.is-selected .day-val {
	   background-color: #5190F5;
	}
	.day {
		position: relative;
		
	  }
	      
	     
	.selected {
		color: #FFFFFF;
		
		border-radius: 14px;
	}
	.day-val {
	  background-color: #5190F5;
	}
	/* .el-calendar-day {
	        height: 46px ;
	        padding: 0;
	        &:hover {
	          background-color: #FFFFFF;
	          .day-val {
	          color: #152432;
	            background-color: #EEF4FE;
	          }
	        }
	      } */
	 .el-calendar {
	        border-radius: 12px 12px 0 0; 
	      }
	/* &-val {
	          width: 46px;
	          height: 46px;
	          line-height: 46px;
	          border-radius: 14px;
	          position: absolute;
	          left: 50%;
	          top: 50%;
	          transform: translate(-50%,-50%);
	          font-size: 18px;
	          text-align: center;
	        } */
	.is-selected, .is-today {
	    background-color: #FFFFFF;    
	}
	.el-calendar__header {
	    border: none;
	}
	.el-calendar__body {
		padding: 10px;
	}
	tr.el-calendar-table__row {
		
		height:52px;
	}
	.el-calendar-table td.is-today {
		color: #FFFFFF;
	}
	/* <div class="part-item" v-for="item in xuehuixinwenList">
		<div class="left-desc">{{item.articleTitle}}</div>
		<div class="right-time">{{item.createdTime}}</div>
	</div> */
	#tongji{
		width:100%;
		height:calc( 100% - 90px)
	}
	.part-item:hover{
		color:#5190F5;
	}
	.part-item{
		cursor:pointer;
		display:flex;
		padding:0 20px;
		height:40px;
		display:flex;
		align-items: center;
	}
	.part-item .left-desc{
		flex:1;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.part-item .right-time{
		width:80px;
		text-align: right;
	}
	
	.line-wrap .line-blue{
		
		width: 100px;
		height: 1px;
		background: #5190F5;
	}
	.line-wrap .line-black{
		flex:1;
		height: 1px;
		background: #D0D3D6;
	}
	.line-wrap{
		padding:0 20px;
		display:flex;
	}
	.more-link{
		cursor:pointer;
		color:#5190F5;
		font-size:16px;
		padding-right:20px;
	}
	.part-common-title{
		display:flex;
		justify-content: space-between;
		padding-left:30px;
		height: 60px;
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 20px;
		color: #152432;
		align-items: center;
		display:flex;
		font-style: normal;
	}
	.item-wrap img{
		padding:3px 3px;
	}
	.item-wrap img:hover{
		box-shadow: 0px 5px 10px 0px rgba(146,193,255,0.5);
	}
	.do-item-wrap {
		box-sizing: border-box;
		padding:0 20px;
		display:flex;
		align-items: center;
		justify-content: space-between;
	}
	.do-item-wrap .left-desc .title{
		
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 18px;
		color: #152432;
		
		font-style: normal;
	}
	
	.do-item-wrap .other-desc{
		
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 16px;
		color: rgba(21,36,50,0.5);
		text-align: left;
		font-style: normal;
	}
	
	.calendet-custom-t{
		padding: 10px;
		display:flex;
		align-items: center;
		justify-content: space-between;
	}
	.calendet-custom-t .right{
		color:#5190F5;
		width:70px;
		margin-right:70px;
		display:flex;
		justify-content: space-between;
	}
	.calendet-custom-t .right span{
		cursor:pointer;
	}
	.year-bold{
		
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 36px;
		color: #152432;
		padding-right:40px;
		font-style: normal;
	}
	.month-bold{
		
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 36px;
		color: #152432;
		
		font-style: normal;
	}
	.part-common{
		overflow-y: auto;
		overflow-x:hidden;
		font-size: 14px;
		color: #152432;
		width:calc(50% - 10px);
		height:100%;
		background: #FFFFFF;
		box-shadow: 0px 5px 10px 0px rgba(146,193,255,0.5);
		border-radius: 12px;
	}
	.waite-title{
		height:70px;
		width: 90%;
		align-items: center;
		display:flex;
		justify-content: space-between;
		margin:0 auto;
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 28px;
		color: #152432;
		font-style: normal;
		
		display:flex;
		justify-content: space-between;
		padding-left:30px;
		height: 60px;
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 20px;
		color: #152432;
		align-items: center;
		display:flex;
		font-style: normal;
	}
	.waite-title .right-t{
		
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 16px;
		color: #5190F5;
		font-style: normal;
	}
	.do-item-wrap{
		width: 90%;
		margin:0 auto;
		height: 104px;
		background: #FFFFFF;
		box-shadow: 0px 2px 6px 2px #E5F0FF;
		border-radius: 10px;
		margin-bottom:10px;
	}
	.canlender-line{
		width:90%;
		margin:0 auto;
		height: 1px;
		background: #D0D3D6;
	}
	.p-wrap img{
		width:126px;
		height:126px;
		
	}
	.p-wrap{
		width:126px;
		height:126px;
		margin:0 auto;
	}
	.pingtai-desc{
		
		width: 110px;
		margin:0 auto;
		height: 22px;
		line-height: 22px;
		font-weight: 400;
		text-align: center;
		color: #fff;
		font-family: songti;
		background: linear-gradient(90deg,#4981ef,#7cbcfc);
		border-radius: 10px 10px 0 0;
		margin-bottom:20px;
	}
	.page-main .tree-wrap{
		justify-content: space-around;
		display:flex;
		width:252px;
		margin:0 auto;
		margin-bottom:50px;
	}
	.page-main .four-wrap .item-wrap{
		width:25%;
		cursor:pointer;
		margin-bottom:6px;
		text-align: center;
	}
	.page-main .four-wrap img{
		display:block;
		margin:0 auto;
		height:60px;
		width:60px;
	}
	.page-main .zhiwei{
		
		height: 22px;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 16px;
		color: rgba(21,36,50,0.5);
		margin-bottom:20px;
		text-align: center;
		font-style: normal;
	}
	
	.page-main .user-name{
		
		height: 40px;
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 28px;
		color: #152432;
		
		text-align: center;
		font-style: normal;
	}
	.page-main .four-wrap{
		display:flex;
		justify-content: space-around;
		flex-wrap:wrap ;
		width:346px;
		margin:0 auto;
	}
	.page-main .main-divide{
		min-width:380px;
		overflow-x: hidden;
		overflow-y: auto;
		height:100%;
		background: #FFFFFF;
		box-shadow: 0px 5px 10px 0px rgba(146,193,255,0.5);
		border-radius: 12px;
		padding:0 30px;
	}
	.page-main .main-card{
		overflow-y: auto;
		overflow-x: hidden;
		box-sizing: border-box;
		padding-top:20px;
		height:100%;
		background: #FFFFFF;
		box-shadow: 0px 5px 10px 0px rgba(146,193,255,0.5);
		border-radius: 12px;
		min-width:380px;
		margin:0 30px;
	}
	.page-main .main-person{
		box-sizing: border-box;
		height:100%;
		display: flex;
		flex-direction: column;
		flex:1;
		justify-content: space-between;
		margin-right:30px;
	}
	.main-person .top-part{
		height:60%;
		display: flex;
		flex-wrap: wrap;
		margin-bottom:20px;
		width: 100%;
	}
	.main-person .bottom-part{
		font-size:24px;
		color: rgba(21,36,50,0.5);
		width:calc(50% - 10px);
		
		height:40%;
		width: 100%;
		background: #FFFFFF;
		box-shadow: 0px 5px 10px 0px rgba(146,193,255,0.5);
		border-radius: 12px;
	}
	.page-main .main-notice{
		flex:1;
		box-sizing: border-box;
		
		height:100%;
		
		
		flex:1;
		;
	}
	.page-main{
		margin-top:70px;
		margin-left:40px;
		height:calc( 100% - 170px);
		display:flex;
	}
	.weather{
		position: relative;
		top:22px;
		height:82px;
		width:180px;
		overflow: hidden;
	}
	.header{
		font-family: YouSheBiaoTiHei;
		font-size: 40px;
		padding:0 20px;
		box-sizing: border-box;
		color:#fff;
		align-items: center;
		height:82px;
		display:flex;
		justify-content: space-between;
		border-bottom:2px solid rgba(255,255,255,0.2);
	}
	.header .right{
		font-family: PingFangSC, PingFang SC;
		font-size: 18px;
		align-items: center;
		display:flex;
	}
	/* .header .left{
		font-family: PingFangSC, PingFang SC;
		font-size: 18px;
		align-items: center;
		display:flex;
	} */
	.header .right .line{
		width:1px;
		height:24px;
		background:#fff;
		margin:0 20px;
	}
	.home-wrap{
		
		height:100%;
		background:url(../../assets/wraptop.png) no-repeat #EEF2FB center 0;
		background-size: 100% 330px;
	}
	
	.logout{
		cursor:pointer;
	}
	.tree-wrap .item-wrap{
		cursor:pointer;
	}
</style>